<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐饮</title>
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap-icons/bootstrap-icons.css">
    <script src="./bootstrap-4.6.2-dist/js/jquery-3.7.1.min.js"></script>
    <script src="./bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
</head>
<style>
    .carousel-item img {
        max-height: 500px;
        object-fit: cover;
    }

    body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #333;
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
    }

    a:hover {
        color: #ffc107;
    }

    /* 导航栏 */
    .navbar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
        font-size: 2rem;
        font-weight: 700;
        color: #ffc107 !important;
    }

    .nav-link {
        margin: 0 0.5rem;
        font-weight: 500;
    }

    /* 登录界面 */
    .login-modal .modal-content {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .login-modal .modal-header {
        border-bottom: none;
    }

    .login-modal .form-control:focus {
        border-color: #ff6b00;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
    }

    .login-btn {
        background-color: #ff6b00;
        border-color: #ff6b00;
        transition: all 0.3s;
    }

    .login-btn:hover {
        background-color: #e65e00;
        transform: translateY(-2px);
    }

    .forgot-password {
        color: #666;
        font-size: 14px;
        transition: color 0.3s;
    }

    .forgot-password:hover {
        color: #ff6b00;
        text-decoration: underline;
    }

    .my-pills .nav-link.active {
        color: #000;
        font-weight: bolder;
        background-color: white !important;
        border-bottom: 2px solid #000;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: #007bff !important;
    }

    /* 二级导航（早餐分类） */
    .sub-nav {
        background-color: #ffffff;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #eee;
    }

    /* 轮播 */
    #carouselExampleCaptions .carousel-caption {
        left: 0px;
        right: 0;
        bottom: 0;
        padding: 5px 10px;
        text-align: left;
        /* 渐变背景 */
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1));
    }

    #carouselExampleCaptions:hover button {
        background-color: rgba(255, 255, 255, 1) !important;
    }

    #carouselExampleCaptions .carousel-indicators {
        background-color: rgba(0, 0, 0, 0.8);
    }

    #carouselExampleCaptions .carousel-indicators li {
        width: 6px;
        height: 6px;
        border: 0;
        border-radius: 50%;
    }

    #carouselExampleCaptions .carousel-indicators li.active {
        /* li.active 表示类为active的li  li.active 表示li标签内部  类为active的任意元素 */
        width: 16px;
        border-radius: 50rem;
    }

    /* 关于餐厅部分 */
    .about-restaurant {
        padding: 50px 0;
    }

    /* 关于餐厅部分 */
    .about-restaurant h2 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .chef-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .chef-info img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .business-hours {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 4px;
    }

    /* 招牌早餐部分 */
    .signature-breakfast {
        padding: 50px 0;
    }

    .signature-breakfast h2 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 40px;
    }

    .breakfast-item {
        text-align: center;
        margin-bottom: 30px;
    }

    .breakfast-item img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 10px;
    }


    /* 特别活动部分 */
    .special-activities {
        padding: 50px 0;
    }

    .special-activities h2 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 40px;
    }

    .activity-item {
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 20px;
        margin-bottom: 30px;
    }

    .activity-item img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* 页脚 */
    footer {
        background-color: #0c2b4b;
        color: #fff;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }
    }
</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href=" ">HUAN</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ml-auto d-flex justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="./index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="./客房.html">客房</a></li>
                    <li class="nav-item"><a class="nav-link active" href="./餐饮.html">餐饮</a></li>
                    <li class="nav-item"><a class="nav-link" href="./关于我们.html">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="tel:4008888888">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-phone" viewBox="0 0 16 16">
                                <path
                                    d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
                                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                            </svg>400 888 8888</a></li>
                    <li class="nav-item"><a class="btn btn-warning" href="./立即预定.html">立即预订</a></li>
                    <li class="nav-item mx-2 ms-auto"><a href="#loginModal" class="btn btn-primary"
                            data-toggle="modal">登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" data-dismiss="modal" class="close" aria-lable="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="row mt-5">
                        <div class="col">
                            <p> 扫码</p>
                            <img src="./img/1.gif" height="300px" width="300px" alt="">
                        </div>
                        <div class="col">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills my-pills" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home"
                                        type="button">账号登陆</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile"
                                        type="button">短信登陆</button>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content mt-3">
                                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <form action="">
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control"
                                                placeholder="请输入账号/邮箱">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入密码">
                                        </div>
                                        <div class="form-group text-right">
                                            <a href="">忘记密码?</a>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <form action="">
                                        <div class="form-group small text-muted">
                                            验证即登录，未注册将自动创建账号
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入手机号">
                                        </div>
                                        <div class="form-group position-relative">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入验证码">
                                            <a class="position-absolute border-left px-2"
                                                style="right: 5px; top:5px">获取验证码</a>
                                        </div>
                                        <div class="form-group mt-5">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer  justify-content-between">
                    <div>
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-qzone.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png" alt="">
                    </div>
                    <a href="">立即注册</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 二级导航（早餐分类） -->
    <div class="sub-nav">
        <div class="container">
            <ul class="nav">
                <li class="nav-item"><a class="nav-link active" href="#">
                        <svg class="bi bi-brightness-alt-high-fill" width="1em" height="1em" viewBox="0 0 16 16"
                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4 11a4 4 0 1 1 8 0 .5.5 0 0 1-.5.5h-7A.5.5 0 0 1 4 11zm4-8a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm8 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zM4.464 7.464a.5.5 0 0 1-.707 0L2.343 6.05a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z" />
                        </svg>早餐
                    </a>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">
                        <svg class="bi bi-sun" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.5 8a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0z" />
                            <path fill-rule="evenodd"
                                d="M8.202.28a.25.25 0 0 0-.404 0l-.91 1.255a.25.25 0 0 1-.334.067L5.232.79a.25.25 0 0 0-.374.155l-.36 1.508a.25.25 0 0 1-.282.19l-1.532-.245a.25.25 0 0 0-.286.286l.244 1.532a.25.25 0 0 1-.189.282l-1.509.36a.25.25 0 0 0-.154.374l.812 1.322a.25.25 0 0 1-.067.333l-1.256.91a.25.25 0 0 0 0 .405l1.256.91a.25.25 0 0 1 .067.334L.79 10.768a.25.25 0 0 0 .154.374l1.51.36a.25.25 0 0 1 .188.282l-.244 1.532a.25.25 0 0 0 .286.286l1.532-.244a.25.25 0 0 1 .282.189l.36 1.508a.25.25 0 0 0 .374.155l1.322-.812a.25.25 0 0 1 .333.067l.91 1.256a.25.25 0 0 0 .405 0l.91-1.256a.25.25 0 0 1 .334-.067l1.322.812a.25.25 0 0 0 .374-.155l.36-1.508a.25.25 0 0 1 .282-.19l1.532.245a.25.25 0 0 0 .286-.286l-.244-1.532a.25.25 0 0 1 .189-.282l1.508-.36a.25.25 0 0 0 .155-.374l-.812-1.322a.25.25 0 0 1 .067-.333l1.256-.91a.25.25 0 0 0 0-.405l-1.256-.91a.25.25 0 0 1-.067-.334l.812-1.322a.25.25 0 0 0-.155-.374l-1.508-.36a.25.25 0 0 1-.19-.282l.245-1.532a.25.25 0 0 0-.286-.286l-1.532.244a.25.25 0 0 1-.282-.189l-.36-1.508a.25.25 0 0 0-.374-.155l-1.322.812a.25.25 0 0 1-.333-.067L8.203.28zM8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" />
                        </svg>午餐
                    </a>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">
                        <svg class="bi bi-moon" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M14.53 10.53a7 7 0 0 1-9.058-9.058A7.003 7.003 0 0 0 8 15a7.002 7.002 0 0 0 6.53-4.47z" />
                        </svg>晚餐
                    </a>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">
                        <svg class="bi bi-cup" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M12 4H4v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4zM3 3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V3H3z" />
                            <path fill-rule="evenodd"
                                d="M14.5 5.5h-2v-1h2A1.5 1.5 0 0 1 16 6v4a1.5 1.5 0 0 1-1.5 1.5h-2v-1h2a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5z" />
                        </svg>酒吧
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 轮播图 -->
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <div class="position-absolute d-flex justify-content-center" style="bottom: 10px;left: 0; right: 0;">
            <ol class="carousel-indicators rounded-pill px-1 py-1 position-relative">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./img/轮播1.jpeg" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block">
                    <p class="mb-0">披萨</p>
                    <h5 class="mb-0">First slide label</h5>
                    <div>
                        <i class="bi bi-hand-thumbs-up"></i>
                        <span>24</span>
                        <i class="bi bi-hand-thumbs-down"></i>
                        <span>8</span>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./img/轮播2.jpg" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block">
                    <p class="mb-0">海鲜</p>
                    <h5 class="mb-0">Second slide label</h5>
                    <div>
                        <i class="bi bi-hand-thumbs-up"></i>
                        <span>36</span>
                        <i class="bi bi-hand-thumbs-down"></i>
                        <span>4</span>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./img/轮播3.jpg" class="d-block w-100" alt="">
                <div class="carousel-caption d-none d-md-block">
                    <p class="mb-0">酒水</p>
                    <h5 class="mb-0">Third slide label</h5>
                    <div>
                        <i class="bi bi-hand-thumbs-up"></i>
                        <span>37</span>
                        <i class="bi bi-hand-thumbs-down"></i>
                        <span>6</span>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn position-absolute px-0 py-2"
            style="left: 1px; top: 40%;background-color: rgba(255,255,255,0.7);" data-target="#carouselExampleCaptions"
            data-slide="prev">
            <i class="bi bi-caret-left-fill"></i>
        </button>
        <button class="btn position-absolute px-0 py-2"
            style="right: 1px; top: 40%;background-color: rgba(255,255,255,0.7);" data-target="#carouselExampleCaptions"
            data-slide="next">
            <i class="bi bi-caret-right-fill"></i>
        </button>
    </div>
    <!-- 关于餐厅 -->
    <section class="about-restaurant py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-6">
                            <img src="./img/about-restaurant1.jpg" class="img-fluid rounded-lg" alt=" ">
                        </div>
                        <div class="col-md-6">
                            <img src="./img/about-restaurant2.png" class="img-fluid rounded-lg" alt=" ">
                        </div>
                        <div class="col-md-6 mt-3">
                            <img src="./img/about-restaurant3.jpeg" class="img-fluid rounded-lg" alt=" ">
                        </div>
                        <div class="col-md-6 mt-3">
                            <img src="./img/about-restaurant4.jpeg" class="img-fluid rounded-lg" alt=" ">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h2>关于Huan餐厅</h2>
                    <p>Huan餐厅位于酒店一层，拥有宽敞明亮的用餐环境，可容纳120位客人同时就餐。我们的早餐自助餐提供超过20种国际美食选择，包括亚洲、欧洲和美洲的特色早餐。</p>
                    <div class="chef-info">
                        <img src="./img/厨师.jpeg" height="50px" width="50px" alt="主厨">
                        <div>
                            <p class="mb-0">张** 主厨</p>
                            <p class="text-muted small">拥有15年国际酒店工作经验，曾在东京、新加坡和巴黎的米其林餐厅任职</p>
                        </div>
                    </div>
                    <div class="business-hours">
                        <p><strong>营业时间</strong></p>
                        <p>周一至周五：6:30 - 10:30</p>
                        <p>周末及节假日：6:30 - 11:00</p>
                        <a class="btn btn-primary" href="./立即预定.html">在线订位</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 招牌早餐 -->
    <section class="signature-breakfast">
        <div class="container">
            <h2 class="text-center">招牌早餐</h2>
            <div class="row">
                <div class="col-md-3">
                    <div class="breakfast-item">
                        <img src="./img/signature-breakfast1.jpg" height="150px" width="120px" alt="经典班尼迪克蛋">
                        <h5>经典班尼迪克蛋</h5>
                        <p class="text-muted small">英式松饼搭配水波蛋、荷兰酱和烟熏三文鱼</p>
                        <p class="font-weight-bold">¥98</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="breakfast-item">
                        <img src="./img/signature-breakfast2.jpg" height="150px" width="120px" alt="健康水果酸奶碗">
                        <h5>健康水果酸奶碗</h5>
                        <p class="text-muted small">自制希腊酸奶配应季水果、格兰诺拉和蜂蜜</p>
                        <p class="font-weight-bold">¥68</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="breakfast-item">
                        <img src="./img/signature-breakfast3.jpg" height="150px" width="120px" alt="日式传统早餐">
                        <h5>日式传统早餐</h5>
                        <p class="text-muted small">烤鱼、米饭、味噌汤、纳豆和日式小菜</p>
                        <p class="font-weight-bold">¥128</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="breakfast-item">
                        <img src="./img/signature-breakfast4.jpg" height="150px" width="120px" alt="美式经典松饼">
                        <h5>美式经典松饼</h5>
                        <p class="text-muted small">松软的饼搭配枫糖浆、新鲜莓果和奶油</p>
                        <p class="font-weight-bold">¥78</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 特别活动 -->
    <section class="special-activities">
        <div class="container">
            <h2 class="text-center">特别活动</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="activity-item">
                        <img src="img/signature-breakfast1.jpg" alt="香槟周末早午餐">
                        <h5>香槟周末早午餐</h5>
                        <p class="text-muted small">每周日11:00 - 15:00</p>
                        <p>无限量香槟搭配豪华海鲜自助，现场爵士乐表演</p>
                        <a href="#" class="text-muted small">了解更多>></a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="activity-item">
                        <img src="./img/special-activities2.jpeg" height="175px" alt="托斯卡纳之夜">
                        <h5>托斯卡纳之夜</h5>
                        <p class="text-muted small">每月第一个周五19:00 - 22:00</p>
                        <p>正宗意大利五道菜晚餐，配托斯卡纳产区精选葡萄酒</p>
                        <a href="#" class="text-muted small">了解更多>></a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="activity-item">
                        <img src="./img/special-activities3.jpg" alt="母亲节特别早餐">
                        <h5>母亲节特别早餐</h5>
                        <p class="text-muted small">5月14日7:00 - 12:00</p>
                        <p>特别设计的母亲节早餐套餐，附送鲜花和纪念照片</p>
                        <a href="#" class="text-muted small">了解更多>></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--页脚-->
    <footer>
        <div class="container">
            <div class="col text-center">
                <!-- 联系我们 -->
                <div class="col-md-12">
                    <h5>联系我们</h5>
                    <div class="contact-info">
                        <p>中国上海市浦东新区某路某号 1288 号</p>
                        <p>电话：400 888 8888</p>
                        <p>邮箱：1111111.com</p>
                    </div>
                </div>
                <!-- 版权与政策 -->
                <div class="col mt-4">
                    <div class="col-12 text-center">
                        <p class="mb-0">&copy; 2023 奢华酒店集团 版权所有</p>
                        <p class="mb-0">
                            <a href="#" class="mr-3">隐私政策</a>
                            <a href="#" class="mr-3">使用条款</a>
                            <a href="#">Cookie 政策</a>
                        </p>
                    </div>
                </div>
            </div>
    </footer>
</body>

</html>